<template>
  <div class="outside">
    <h1>你好，<br />欢迎回来！</h1>
    <br />
    <div class="inp">
      <div class="top" @click="topClick">
        <div :class="{ active: topFlag }">用户名</div>
        <input type="text" v-model="text.user" />
      </div>
      <div class="but" @click="butClick">
        <div :class="{ active: butFlag }">密码</div>
        <input type="password" v-model="text.password" />
      </div>
    </div>
    <div class="forget">忘记密码?</div>
    <br />
    <van-button
      type="primary"
      color="linear-gradient(to right, #0F73EE, #C644FC)"
      style="width: 90vw; margin-bottom: 30vh"
      @click="log"
      >登录</van-button>
    <div class="foot">还没有账号？马上注册</div>
  </div>
</template>
<style lang="less" scoped>
.outside {
  width: 90vw;
  height: 80vh;
  margin: 10vh auto 0 auto;
  // background-color: aqua;

  .inp {
    width: 100%;
    height: 25vh;
    // background-color: fuchsia;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 2vh;
    font-size: @l-font;

    .top {
      flex: 0.4;
      // background-color: red;

      border: 1px solid #6666667a;
      border-radius: 10px;
      input {
        height: 5vh;
        width: 90%;
        border: 0px;
        background-color: rgba(255, 255, 255, 0);
        z-index: 20;
        padding: 10px;
      }
    }
    .but {
      flex: 0.4;
      border: 1px solid #6666667a;
      border-radius: 10px;
      input {
        height: 5vh;
        width: 90%;
        border: 0px;
        background-color: rgba(255, 255, 255, 0);
        padding: 10px;
        z-index: 20;
      }
    }
  }
  .forget {
    margin-top: 2vh;
    font-size: @s-font;
    text-align: right;
    padding-right: 20px;
  }
  .foot {
    font-size: @m-font;
    text-align: center;
  }
  .active {
    transform: scale(2);
    transform: translate(20px, 25px);
    font-size: @xxxl-font;
  }
}
</style>

<script setup lang="ts">
let topFlag: boolean = false;
let butFlag: boolean = false;
const text: any = {
  user: "",
  password: "",
};

const topClick = () => {
  console.log("上");
  topFlag = false;
  console.log(topFlag);
};

const butClick = () => {
  console.log("下");
  butFlag = false;
  console.log(butFlag);
};
const log = () => {
  console.log(text);
};
</script>
